<template>
    <popup>
        <i class="fa fa-times close-icon" @click="close" aria-hidden="true"></i>
        <div class="content">
            <div class="title">新建文件</div>
            <div class="input"><input id="name"><div>.py</div></div>
            <div class="tip">{{tip}}</div>
            <div class="btn">
                <div class="apply" @click="apply">确定</div>
                <div class="cancel" @click="close">取消</div>
            </div>
        </div>
    </popup>
</template>

<script>
import popup from '../../common/base-popup'
export default {
  name: 'newfile-popup',
  data () {
    return {
      tip: ''
    }
  },
  props: {
    works: {
      type: Array
    }
  },
  components: {
    popup: popup
  },
  methods: {
    apply: function () {
      let reg = /^[a-zA-Z0-9-]{1,13}$/
      let name = document.getElementById('name').value
      let flag = true

      if (name.length === 0) {
        this.tip = '文件名为空'
        flag = false
      } else if (name.length > 13) {
        this.tip = '文件名大于13位'
        flag = false
      } else if (!reg.test(name)) {
        this.tip = '文件名只能使用英文、数字组合'
        flag = false
      }
      name = name + '.py'
      for (let i in this.works) {
        if (name === this.works[i].name) {
          this.tip = '文件名重复'
          flag = false
        }
      }
      if (flag) {
        this.$emit('apply', name)
      }
    },
    close: function () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
    .title{
        font-size: 22px;
        line-height: 30px;
    }
    .input{
        /*width: 350px;*/
        margin: auto;
        margin-top: 15px;
        height: 40px;
        position: relative;
    }
    .input>div{
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 1px solid lightgray;
        position: absolute;
        top: 0;
        right: -2px;
        height: 42px;
        width: 80px;
        font-size: 15px;
        text-align: center;
        line-height: 40px;
        color: gray;
    }
    .tip{
        height: 30px;
        display: block;
        line-height: 30px;
        font-size: 14px;
        color: #F45A8D;
    }
    #name{
        width: 100%;
        height: 100%;
        border-radius: 5px;
        border: 1px solid lightgray;
        outline: none;
        text-indent: 1em;
        font-size: 15px;
    }
    .content{
        padding: 35px 40px;
    }
    .close-icon{
        font-size: 20px;
        line-height: 50px;
        float: right;
        margin-right: 20px;
        color: gray;
        cursor: pointer;
    }
    .close-icon:hover{
        color: black;
    }
    .btn{
        margin-top: 5px;
        width: 100%;
        text-align: right;
    }
    .btn>div{
        font-size: 13px;
    }
    .apply{
        background-color: dodgerblue;
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        border-radius: 20px;
        color: white;
        display: inline-block;
        margin-left: auto;
        cursor: pointer;
    }
    .apply:hover{
        background-color: #0088ff;
    }
    .cancel{
        /*background-color: rgb(220,220,220);*/
        border: 1px solid lightgray;
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        border-radius: 20px;
        color: gray;
        display: inline-block;
        margin-left: 10px;
        cursor: pointer;
    }
    .cancel:hover{
        /*color: black;*/
        border-color: dodgerblue;
        color: dodgerblue;
    }
</style>
